<template>
  <div class="search-suggestion">
    <van-cell v-for="(item, index) in sugListHigh" :key="index" icon="search">
      <div v-html="item" @click="clickKeyWord(index)"></div>
    </van-cell>
  </div>
</template>

<script>
import { getSugList } from '@/api/search'
// 按需导入防抖函数
import { debounce } from 'lodash'
export default {
  name: 'searchSuggestion',

  props: {
    keyword: {
      type: String, // 类型约束
      required: true, // 属性必须传值
      // 校验 父组件传递的值的规则 如果不合规，则返回false，否则，返回true
      validator: function (value) {
        return value.length > 0
      }
    }
  },

  data () {
    return {
      // 搜索建议关键字列表
      sugList: [], // 正常数组
      sugListHigh: [] // 高亮数组
    }
  },

  mounted () {},

  methods: {
    clickKeyWord (i) {
      this.$emit('setKeyWord', this.sugList[i])
      console.log(this.sugList[i])
    },

    async getSugList2 (k) {
      // 立即查询建议关键字列表
      const res = await getSugList(k)
      console.log(res.data.data.options)
      // 为关键字添加高亮
      if (res.data.data.options[0] === null) {
        return
      }
      const reg = new RegExp(`${k}`, 'ig')
      this.sugListHigh = res.data.data.options.map((v) =>
        v.replace(reg, `<span class="highlight">${k}</span>`)
      )
      this.sugList = res.data.data.options
    }
  },

  created () {},

  watch: {
    // 使用对象格式的侦听器，侦听同名属性 keyword 的值的改变
    keyword: {
      // 处理函数：注意首次加载组件不会执行
      // 设置防抖函数
      handler: debounce(function (str) {
        this.getSugList2(str)
      }, 1000),
      // 强制首次加载就立即执行侦听器 handle函数
      immediate: true
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .highlight {
  color: red;
  font-weight: bolder;
}
</style>
